/*
 * @Author: xiongpj
 * @Email: xiongpeiji@innjoy.me
 * @Date: 2020-10-09 11:14:24
 * @Last Modified by: xiongpj
 * @Last Modified time: 2020-10-09 18:03:58
 * @Description: 资产状态占比图表组件
 */
<template>
  <div class="zichanzhuangtaizhanbi">
    <div class="top-tools">
      <h3>{{text}}</h3>
      <div class="select-school">
        <span :class="{ active: dataIndex == 0 }" @click="changeIndex(0)">数量</span>
        <span class="line">|</span>
        <span :class="{ active: dataIndex == 1 }" @click="changeIndex(1)">金额</span>

        <span class="select-span">
            <el-select v-model="value" placeholder="请选择" @change="changeDataVal">
                <el-option
                v-for="item in CompanyList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
                >
                </el-option>
            </el-select>
        </span>
      </div>
    </div>
    <div class="chart-box">
        <div id="bmzb"></div>
    </div>
  </div>
</template>

<script>
import { Chart } from "@antv/g2";
import $api from "@/axios/apiConfig"; //接口
import axios from "@/axios"; //请求
export default {
    props:{
        text:String
    },
  data() {
    return {
      value: '01',
      dataIndex:0,
      CompanyList:[],//公司列表
      AssetStatPercent:[],
      chart:null,
    };
  },
  methods:{
    //获取公司列表 
    getCompanyList(){
      axios.get($api.api+'/smart-uttc/assetManage/getCompanyList').then(res => {
          if (res) {
              this.CompanyList = res.data;
          }
      });
    },
    //获取资产状态占比 
    getAssetStatPercent(){
      let url = '?dullPeriod='+'&companyCodes='+this.value
      axios.get($api.api+'/smart-uttc/assetManage/getDepartmentUsePercent'+url).then(res => {
          if (res) {
              this.AssetStatPercent = res.data;
              this.chartRender()
          }
      });
    },
    changeDataVal(val){
        this.value = val;
        this.changeData();
    },
    changeIndex(idx){
        this.dataIndex = idx;
        if(idx==0){
            this.chart.changeData(this.AssetStatPercent.countList);
        }else{
            this.chart.changeData(this.AssetStatPercent.amountList);
        }
    },
    // 筛选条件改变重新选软数据
    changeData(){
        let url = '?dullPeriod='+'&companyCodes='+this.value
        axios.get($api.api+'/smart-uttc/assetManage/getDepartmentUsePercent'+url).then(res => {
          if (res) {
            this.AssetStatPercent = res.data;
            this.dataIndex = 0
            this.chart.changeData(this.AssetStatPercent.countList);
          }
      });
    },
    chartRender(){
        
        const chart = new Chart({
            container: 'bmzb',
            autoFit: true,
            height: 300,
            padding:[0,100,0,0]
        });

        chart.coordinate('theta', {
            radius: 0.8,
        });
        chart.data(this.AssetStatPercent.countList);
        // chart.scale('percentage',{
        //     formatter: (val) => {
        //         val = (val*100).toFixed(2) + '%';
        //         return val;
        //     },
            
        // });
        chart.coordinate('theta', {
            radius: 0.75,
            innerRadius: 0.6,
        });
         
        chart.tooltip({
            showTitle: false,
            showMarkers: false,
            showContent:true,
            itemTpl:'<li style="height:26px"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{type},{value},{percentage}</li>'
        });
        chart.legend({
            position: 'right',
            layout:'vertical',
            itemSpacing:'20',
            offsetX:0,
            offsetY:10,
            marker:{ 
                symbol:"square",
                style:{
                    r:6
                },  
            },
            itemName:{
                // formatter:(data)=>{
                //     val = val+ ' '+type;
                //     return val;
                // },
                style:{
                    fill:'rgba(255,255,255,0.6)',
                    fontSize:12,
                    lineHeight:12
                }
                },
        });
        chart
        .interval()
        .position('percentage')
        .color('type')
        .label('percentage', {
            content: (data) => {
                return `${data.type}:${data.value}:${(data.percentage*100).toFixed(2)}%`;
            },
        }).tooltip('type*value*percentage',function(type,value,percentage){
            return{
                type:type,
                value:value,
                percentage:(percentage*100).toFixed(2)+'%'
            }
        })
        .adjust('stack');
        chart.interaction('element-active');
        chart.render();
        this.chart = chart;
    }
  },
  mounted(){
      this.getCompanyList();
      this.getAssetStatPercent();
  }
};
</script>

<style scoped lang="scss">
.zichanzhuangtaizhanbi {
  padding: 10px;
  .top-tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
    h3 {
      font-size: 16px;
      height: 16px;
      line-height: 16px;
      padding-left: 10px;
      border-left: 4px solid #00ffee;
    }
    .select-school{
        span{
            cursor: pointer;
            color: rgba(255,255,255,.6);
        }
              .line{
      color:#2A55FF;
      margin: 0px 10px;
    }
        .active{
            color: #00FFEE;
        }
        .select-span{
            margin-left: 20px;
        }
    }
  }
}
</style>
<style>
.el-input__inner{
    width: 144px;
    height: 34px;
    border-color:#2A55FF ;
    background: #2A55FF;
    color: #fff;
}
</style>